Templates - Date Formatting

Description

Typically the data in a List control is all text data. So even though a column in the List might be displaying a date value, the actual data in the List data array for that column is still a string.

The only exception to this is if the List is populated using Javascript and in the Javascript array that was used to populate the List, the column was explicitly set to a Javascript data object. Or, the data in the column was explicitly cast to a date object by setting the Transform data type property on the Fields pane in the List builder.

The template used to display data in the list allows you to specify an optional format.

For example, say you have a column in the List called 'OrderDate', the template for that column in the List will be:

{OrderDate}

However, say you wanted the display format for the OrderDate to be yyyy-MM-dd (e.g. 2014-12-25), then you can add a format directive to the template. For example:

{OrderDate:date('yyyy-MM-dd')}

The above format directive only works if the data in the 'OrderDate' column in the List are a date object.

But, in many cases, the data in the List are all strings of text, so you cannot use the above format directive unless you first cast the data to a date object. When working with Lists that have updatable Detail Views, casing date strings to date objects introduces other complexities and it would be desirable to not have to cast the date string to a date object, but rather to be able to simply format the date string.

To do this, a new format directive has been added. For example:

{OrderDate:dateString('MM-dd-yyyy','yyyy-MM-dd')}

This directive takes two date formats. The first date format is used to parse the date string into a date object and the second date format is the output format.